<template>
	<view :class="['xl-radio-container', direction == 'row' ? 'items-row' : 'items-column']">
		<view :class="['xl-radio-item',{'underline': underline}]" v-for="(item,index) in redioList" :key="index" @click="itemClick(item)">
			<view :class="['xl-radio-item-info', {'xl-radio-item-checked': isChecked(item), 'xl-radio-item-checked-yes': isChecked(item) && remove, 'xl-radio-icon-disabled': props.disabled || item.disabled, 'xl-radio-item-bg': showBackground}]" 
				:style="{'--gap':$xl.parseUnit(gap, 'rpx'), '--icon-size': $xl.calcUnit(iconSize, 'rpx'), '--bg-color': $xl.color.colorToRgba(iconColor, 0.2)}">
				<view class="xl-radio-icon" hover-class="xl-radio-icon-clickable">
					<view class="xl-radio-icon-hover"></view>
					<!-- #ifdef MP-WEIXIN -->
					<xl-icon v-if="remove" class="yes" name="xl-yes" color="#fff" size="12" top="-5rpx"></xl-icon>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<xl-icon v-if="remove" class="yes" name="xl-yes" color="#fff" size="12"></xl-icon>
					<!-- #endif -->
				</view>
				<view v-if="items.length > 0" class="xl-radio-text" :style="{fontSize: $xl.parseUnit(fontSize, 'rpx')}">
					{{ item[labelName] || item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['update:modelValue', 'click'])
	
	// 双向绑定值，让v-model绑定的值双向变化
	const checkedValue = ref()
	
	watch(() => props.modelValue, (newValue, oldValue) => {
		checkedValue.value = newValue
	},{immediate: true})
	
	const redioList = computed(()=>{
		if(props.items.length > 0) return props.items
		else return [true]
	})
	
	function isChecked(item){
		if (typeof item === 'string' || typeof item === 'boolean') return item == checkedValue.value
		else return item[props.valueName] == checkedValue.value
	}
	
	//单击事件
	function itemClick(item) {	
		if (props.disabled || item.disabled) return;
		if (typeof item === 'string' || typeof item === 'boolean'){
			if(props.remove && checkedValue.value == item) checkedValue.value = props.items.length > 0 ? '' : false
			else checkedValue.value = item
		}else {
			if(props.remove && checkedValue.value == item[props.valueName]) checkedValue.value = props.items.length > 0 ? '' : false
			else checkedValue.value = item[props.valueName]
		}
		emits('update:modelValue', checkedValue.value);
		emits('click', checkedValue.value);
	}
</script>

<style lang="scss" scoped>
	.xl-radio-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		&.items-row{
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		&.items-column{
			flex-direction: column;
		}
		
		.xl-radio-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;

			&.underline {
				padding: 12rpx 0;
				border-bottom: 1rpx solid #e4e4e4;
			}

			.xl-radio-item-info {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				box-sizing: border-box;
				border-radius: calc(var(--icon-size)*2);
				margin-right: var(--gap);
				padding: calc(var(--icon-size)/5) calc(var(--icon-size)/2) calc(var(--icon-size)/5) calc(var(--icon-size)/4);
				background: transparent;
				
				&.xl-radio-icon-disabled{
					.xl-radio-icon {
						background: #ebedf0;
					}
					.xl-radio-text {
						color: #c8c9cc;
					}
				}
				
				&.xl-radio-item-checked{
					.xl-radio-icon{
						border: calc(var(--icon-size)/3) solid v-bind(iconColor);
						
					}
					
					&.xl-radio-item-bg {
						background: var(--bg-color);
						.xl-radio-text {
							color: v-bind(iconColor);
						}
					}
				}
				
				&.xl-radio-item-checked-yes{
					.xl-radio-icon{
						border: 2rpx solid v-bind(iconColor);
						background: v-bind(iconColor);
					}
				}
				

				.xl-radio-icon {
					width: var(--icon-size);
					height: var(--icon-size);
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					border-radius: 50%;
					border: 2rpx solid #c9c9cc;
					background: #fff;
					transition: border 0.25s ease;
					position: relative;
					
					&.xl-radio-icon-clickable{
						.xl-radio-icon-hover{
							background: rgba(0, 0, 0, 0.05);
							transform: scale(2.5);
						}
					}
					
					.xl-radio-icon-hover{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 50%;
						transform: scale(1);
						transition: transform 0.25s ease;
						z-index: -1;
					}
				}

				.xl-radio-text {
					margin-left: 14rpx;
					box-sizing: border-box;
					color: v-bind(fontColor);
					flex: 1;
				}
			}
		}


	}
</style>